<template>
	<view class="order-records">
		<view class="records-item">
			<view class="r-left">
				<text class="name u-line-1">{{ record.name}}</text>
				<text class="desc">订单号：{{ record.order_sn }}</text>
				<text class="desc">消费金额：<text>{{ record.total_amount }}</text></text>
				<!-- <text class="desc">实际金额：<text>{{ record.pay_type_text }}</text></text> -->
				<text class="desc"
					v-if="record.use_balance_amount>0">用户使用消费红包：<text>-{{ record.use_balance_amount }}</text></text>
				<text class="desc" v-else>用户使用消费红包：<text>0</text></text>
				<text class="desc">商家红包收益：<text>{{record.red_income}}</text></text>
				<text class="time">下单时间：{{ record.create_time }}</text>
			</view>
			<view class="r-right">
				<text class="money increment" v-if="record.pay_amount>0">+{{ record.pay_amount }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';
	const props = defineProps({
		record: {
			type: Object,
			default: () => { //定义默认值
				return []
			}
		},
	})

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};
</script>

<style lang="scss">
	.order-records {
		background-color: $u-bg-reverse-color;
		margin-bottom: $m24;

		.records-item {
			@include f-between;
			overflow: hidden;
			margin-bottom: $m24;
			padding: $m24;
			background-color: $u-bg-reverse-color;
			border-radius: $radius-12;

			.r-left,
			.r-right {
				display: flex;
				flex-direction: column;
			}

			.r-left {
				flex: 1;
				overflow: hidden;

				.name {
					font-size: $font-32;
					color: $u-main-color;
					font-weight: bold;
				}
			}

			.r-right {
				align-items: flex-end;

				.money {
					font-size: $font-36;
					font-weight: bold;

					&.increment {
						color: $u-type-error;
					}

					&.decrement {
						color: $u-type-success;
					}
				}
			}

			.desc,
			.time {
				font-size: $font-24;
				color: $u-tips-color;
			}

			.desc-right {
				padding-left: 20rpx;
			}
		}
	}

	// 订单信息
	.order {
		.top {
			@include f-between;
			padding: $m20;

			.store {
				display: flex;
				align-items: center;
				max-width: 360rpx;

				.name {
					margin-left: $m8;
				}
			}

			.status {
				font-size: $font-24;
				color: $u-tips-color;

				&.pay {
					color: $u-type-error;
				}
			}
		}

		.product-list {
			padding: 0 $m20;

			.product-item {
				@include f-between;
				padding: $m16 0;

				.name {
					flex: 1;
					color: $u-main-color;
				}

				.other {
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					.count {
						color: $u-tips-color;
					}
				}
			}
		}

		.refund {
			color: $u-type-error;
			text-align: right;
			padding: 0 $m20 $m16;
		}

		.total {
			padding: 0 $m20 $m16;
			text-align: right;
			font-size: $font-24;
			color: $u-content-color;

			.t-price {
				font-weight: bold;
			}
		}
	}
</style>